<template>
  <div class="tab-content">
    <ModuleSection title="个人服务" icon="fas fa-user">
      <ModuleMenu :items="profileMenuItems" />
    </ModuleSection>
    
    <ModuleSection title="个人信息" icon="fas fa-user">
      <ListItem 
        v-for="item in profileList" 
        :key="item.id"
        :title="item.title"
        :description="item.description"
        :icon="item.icon"
        :bgColor="item.bgColor"
      />
    </ModuleSection>
  </div>
</template>

<script>
import ModuleSection from '../common/ModuleSection.vue'
import ModuleMenu from '../common/ModuleMenu.vue'
import ListItem from '../common/ListItem.vue'

export default {
  name: 'ProfileModule',
  components: {
    ModuleSection,
    ModuleMenu,
    ListItem
  },
  data() {
    return {
      profileMenuItems: [
        { id: 1, name: '个人资料', icon: 'fas fa-user', bgColor: 'bg-blue', path: '/profile/info' },
        { id: 2, name: '我的申请', icon: 'fas fa-clipboard-list', bgColor: 'bg-green', path: '/profile/applications' },
        { id: 3, name: '待我审批', icon: 'fas fa-tasks', bgColor: 'bg-orange', path: '/profile/approvals' },
        { id: 4, name: '排班信息', icon: 'fas fa-calendar-alt', bgColor: 'bg-purple', path: '/profile/schedule' },
        { id: 5, name: '运营报表', icon: 'fas fa-chart-bar', bgColor: 'bg-cyan', path: '/profile/reports' },
        { id: 6, name: '系统设置', icon: 'fas fa-cog', bgColor: 'bg-yellow', path: '/profile/settings' }
      ],
      profileList: [
        { 
          id: 1, 
          title: '个人资料', 
          description: '查看和修改个人基本信息',
          icon: 'fas fa-id-card',
          bgColor: 'bg-blue'
        },
        { 
          id: 2, 
          title: '我的差旅费标准', 
          description: '查看个人出差费用标准',
          icon: 'fas fa-file-alt',
          bgColor: 'bg-cyan'
        },
        { 
          id: 3, 
          title: '帮助与反馈', 
          description: '使用帮助和问题反馈',
          icon: 'fas fa-question-circle',
          bgColor: 'bg-purple'
        }
      ]
    }
  }
}
</script>

<style scoped>
.tab-content {
  padding: 16px;
}
</style> 